<template>
<div class="header">
		<img class="logo" src="../../assets/img/logo.png" />
		 <nav>
			<ul>
			<router-link v-for="(item, index) in urlList" :to="{path:item.url}" :key= "index" class="linkLi">{{item.name}}</router-link>
				<!--li v-for="(item, index) in urlList" :key= index @click="changeRouter(item.url,index)" :class="item.class">
					{{item.name}}
				</li-->
			</ul>
		</nav>
		<!-- <el-menu
			:default-active="activeIndex2"
			class="el-menu-demo"
			mode="horizontal"
			@select="handleSelect"
			active-text-color="#22D18E">
			<img class="logo" src="../../assets/img/logo.png" />
			<el-menu-item v-for="(item, index) in urlList" :key= index index='index' @click="changeRouter(item.url,index)">{{item.name}}</el-menu-item>
		</el-menu> -->
		<!-- <el-header style="text-align: right; font-size: 12px" class=""> -->
			<div class="userdiv">
				<el-dropdown @command="handleCommand">
					<span class="el-dropdown-link">
						{{name}}<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="b">退出登录</el-dropdown-item>
						<!-- <el-dropdown-item command="e" divided></el-dropdown-item> -->
					</el-dropdown-menu>
				</el-dropdown>
			</div>

    <!-- </el-header> -->
</div>
</template>

<script>
	import{logout} from '../../api/login.js'
  export default {
    data() {
			return {
				activeIndex2: '1',
				// name: JSON.parse(sessionStorage.getItem('userMsg')),
				name: '',
				urlList:[
					{url:'/index/inventory',name:'库存管理',class:'on'},
					{url:'/index/rightsInterests',name:'权益管理',class:''}
				]
			}
		},
		created() {
			this.name = window.sessionStorage.getItem('username');
		},
		methods: {
			changeRouter(url,index) {
				this.$router.replace(url);
				this.urlList.forEach(item => {
					item.class = '';
				});
					this.urlList[index].class = 'on';
			},
			handleSelect(key, keyPath) {
			},
			handleCommand(command) {
				if(command === 'a') {
					this.$router.replace('/index/accountmsg')
				}else {
					logout().then((res) => {
						if(res.data.code === 200){
							this.$router.replace('/login')
						}else {
							this.$message(res.data.msg);
						}
					})
					// this.$message('click on item ' + command);
				}

      }
		}
  };
</script>

<style lang="less" scoped>
.logo {
	margin:13px 0 0 66px;
	float: left;
}
ul {
	padding-left: 250px;
	.linkLi{
		float: left;
		width: 100px;
		margin-right: 90px;
		height: 68px;
		line-height: 68px;
		color: #838FA8;
		font-size: 18px;
		text-align: center;
		position: relative;
		i{
			width: 0;
			height: 4px;
			background: #22D18E;
			display: block;
			position: absolute;
			bottom: 0;
			display: none;
		}
	}

}
.on {
	color: #fff;
	border-bottom: 4px solid #22D18E;
	// animation: move 1s;
	i{
		display: block;
		width: 100%;
    transition: transform 1.5s cubic-bezier(.645,.045,.355,1);
		transform: translateX(92px);
	}
 }
@keyframes move {
	form { border-bottom: 0px}
	to { border-bottom: 4px solid #22D18E;}

}
.userdiv {height: 72px;line-height: 72px;width: 260px;text-align: right;position: absolute;right: 20px;}
</style>

